<template>
  <div id="componentA">
    <div id="bottom">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
          <div class="grid-content bg-purple bottom-group">
            <div class="bottom-group-1">
              <h1>{{mytest.title}}</h1>
              <span>查看更多</span>
            </div>
            <div class="bottom-group-list">
              <ul>
                <li>
                  <h3>AntDesign</h3>
                  <div class="bottom-group-list-content">
                    Designed as Ant
                    Design，提炼和服务企业级中后台产品的交互语言和视觉风格。React
                    Component 基础上精心封装的高质量 UI 组件。基于 npm + webpack
                    + babel 的工作流，…
                    <span>2016-10-22 12:00:00</span>
                  </div>
                </li>
                <li>
                  <h3>AntDesign</h3>
                  <div class="bottom-group-list-content">
                    Designed as Ant
                    Design，提炼和服务企业级中后台产品的交互语言和视觉风格。React
                    Component 基础上精心封装的高质量 UI 组件。基于 npm + webpack
                    + babel 的工作流，…
                    <span>2016-10-22 12:00:00</span>
                  </div>
                </li>
                <li>
                  <h3>AntDesign</h3>
                  <div class="bottom-group-list-content">
                    Designed as Ant
                    Design，提炼和服务企业级中后台产品的交互语言和视觉风格。React
                    Component 基础上精心封装的高质量 UI 组件。基于 npm + webpack
                    + babel 的工作流，…
                    <span>2016-10-22 12:00:00</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
          <div class="grid-content">
            <div class="bottom-group-1">
              <h1>推荐文章</h1>
            </div>
            <div class="border">
              <img src="../../assets/logo.png" height="200" width="200" />
            </div>
            <div class="border">占位{{mytest.mytest}}</div>
          </div>
          <article />
        </el-col>
      </el-row>
    </div>  </div>
</template>

<script>

  export default {
    props:[
      'mytest'
    ],

    name:'componentA',
    data(){
      return{
        // mytest: ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  #top,
  #bottom {
    margin: 0 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    background: #5ff1cc;
    /*background: #d3dce6;*/
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    position: relative;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .article {
    height: 130px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-bottom: 8px ;
  }
  .el-row-1 {
    margin-top: 25px;
  }
  .swiper {
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
  }

  .dots {
    ul {
      display: flex;
      align-items: center;
      position: relative;
    }
    img {
      margin: 2px;
    }
    position: absolute;
    left: calc(50% - 36px);
    display: flex;
    align-items: center;
  }
  .swiper-dot-show {
    position: relative;
    left: 12px;
  }
  .bottom-group {
    /*margin-bottom: 300px;*/
  }
  .bottom-group-1 {
    margin-top: 50px;
    position: relative;
    h1 {
      /*float: left;*/
      border-bottom: 1px solid #8f949a;
    }
    span {
      font-size: 13px;
      position: absolute;
      right: 0;
      top: 20px;
      cursor: pointer;
    }
    span:hover {
      color: #108de9;
    }
  }
  .bottom-group-list {
    padding: 20px 10px;
    h3 {
      margin-bottom: 30px;
      margin-top: 20px;
    }
    li {
      border-bottom: 1px solid #e0e0e0;
    }
  }
  .bottom-group-list-content {
    font-size: 14px;
    span {
      display: block;
      margin: 60px 0 10px;
      color: #bdbdbd;
      font-size: 12px;
    }
  }
  .block {
    text-align: center;
  }
  .page {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
  }
  .border {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin: 20px 0;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .btn-p{
    height: 70px;
    width: 70px;
    border: 1px solid;
    border-radius: 50%;
    position: relative;;
    // z-index: 99;
    box-shadow: 0 2px 5px #616161;
    span{
      position: absolute;
      left: calc(50% - 27px);
      top:calc(50% - 5px)
    }
  }
  .entrance{
    position: fixed;
    bottom: 200px;
    right: 0;
  }
  .router{
    text-decoration: none;
    color:#108de9;
  }
  // .router

</style>
